import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { Button } from '@tarojs/components'
import './index.scss'

/**
 * 按钮
 * @param text
 * @param width
 * @param height
 * @param circle
 * @param type 		按钮类型 defalut, primary, secondary
 * @param disabled
 * @param cls
 * @param onClick
 */
class BaseButton extends Component {

	static propTypes = {
		text: PropTypes.string.isRequired,
		width: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		height: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		cls: PropTypes.string,	
		circle: PropTypes.bool, 							// 圆角
		type: PropTypes.string,								// 按钮类型 defalut, primary, secondary
		disabled: PropTypes.bool,							
		center: PropTypes.bool,							
		onClick: PropTypes.func,
	}

	static defaultProps = {
		text: '新增地址',
		type: 'default',
		width: '120px',
		height: 40,
		circle: true,
		disabled: false,
		center: true,
		cls: '',
	}

	handleButtonClick = () => {
		const { disabled } = this.state
		if(!disabled){
			const { onClick } = this.props
			onClick && onClick()
		}
	}

	render(){
		const { text, width, height, type, circle, cls, disabled, center} = this.props
		return(
			<Button
				className={`base-button base-button-type-${type} ${center ? 'base-align-center':''} ${disabled ? 'base-buton-disabled': ''} ${cls}`}
				style={{width: width, height: height, lineHeight: `${parseInt(height)}px`, borderRadius: circle ? Math.floor(parseInt(height)/2) : 0 }}
				disabled={disabled}
				onClick={this.handleButtonClick}
			>{text}</Button>
		)
	}
}

export default BaseButton